<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>管理-管理系统</title>
	<meta name="keywords" content="管理系统">
	<meta name="description" content="管理系统">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<div>
	<div style="padding:20px; background-color: #F2F2F2;">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header"></div>
					<div class="archives">
						<div id="main1" style="width: 100%; height: 350px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
</body>

<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/public.js" charset="utf-8"></script>
<script src="../../dist/echarts.min.js"></script>
<script>
	layui.use(['table','laydate'], function(){
		var table = layui.table;
		var $ = layui.jquery;
		var form = layui.form;
		var laydate = layui.laydate;
		var autoRequestTimer;

		var myChart1 = echarts.init(document.getElementById('main1'));

		queryListLevel();
		autoRequestTimer = setInterval(queryListLevel, 20000); // 20000毫秒=20秒

		//日期选择器
		laydate.render({
			elem: '#arrears_date'
			,type: 'date' //默认，可不填
			,trigger: 'click'
		});

		//重载表格
		$('.btnSearch').on('click',function(){
			var arrears_date = $('#arrears_date').val();
			queryListLevel(arrears_date);
		});

		function queryListLevel(times){
			$.ajax({
				url:'/realTime/query_topic_resources_top5',
				type:'get',
				data:{},//JSON.stringify({"state":"1","arrears_date":times})
				dataType:"json",//数据类型,
				contentType: 'application/json',
				beforeSend:function(){
					//do something
				},
				success:function(data){
					//do something
					if(data.code==0){
						var option = {
							title: {
								text: '统计访问资源次数最多的前5个学习主题'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: [
								{
									type: 'category',
									data: data.data.name,
									axisTick: {
										alignWithLabel: true
									}
								}
							],
							yAxis: [
								{
									type: 'value'
								}
							],
							series: [
								{
									name: '资源次数',
									type: 'bar',
									barWidth: '60%',
									data: data.data.num
								}
							]
						};
						myChart1.setOption(option);
					} else {
						$('.tips').text('* 账号与密码不匹配，请重新输入');
					}
				},
				error:function(data){
					//do something
					layer.msg('与服务器连接失败,请稍后登录',{icon: 2});
				}
			});
		};

		// 清理定时器
		window.onunload = function() {
			clearInterval(autoRequestTimer);
		};
	});
</script>
</html>